import React, {useState, useEffect} from 'react';
import layoutStyle from '@/assets/styles/layout';
import {
  StyleSheet,
  Linking,
  Alert,
  Text,
  View,
  Button,
  TouchableOpacity,
  Image,
} from 'react-native';
import {connect} from 'react-redux';
import * as RootNavigation from '@/utils/rootNavigation';
import * as CacheManager from '../../../react-native-http-cache2';
import ArrowIcon from '@/assets/images/arrow_icon.png';
import {useTranslation} from 'react-i18next';
function Setting({navigation}) {
  const {t} = useTranslation();
  const [cacheSize, setCacheSize] = useState('0M');
  useEffect(() => {
    navigation.setOptions({
      headerShown: true,
      headerBackVisible: true,
    });
    getSize();
  }, []);

  // 获取缓存
  const getSize = () => {
    CacheManager.getCacheSize()
      .then(value => {
        const size = value / (1024 * 1024);
        let sizeFormat = size.toFixed(2) + 'M';
        setCacheSize(sizeFormat);
      })
      .catch(error => {
        console.log('获取缓存失败' + error);
      });
  };
  const viewAppInfo = () => {
    RootNavigation.push('Version');
  };

  const onClear = () => {
    Alert.alert(t('sys_tip'), t('sys_clearCacheConfirm'), [
      {
        text: t('sys_cancel'),
        onPress: () => {},
        style: 'cancel',
      },
      {
        text: t('sys_confirm'),
        onPress: () => {
          CacheManager.clearCache().then(() => {
            setCacheSize('0M');
          });
        },
      },
    ]);
  };
  return (
    <View style={[layoutStyle.container]}>
      <View style={styles.cardbox}>
        <View>
          <TouchableOpacity
            style={styles.loginOutBtn}
            onPress={() => onClear()}>
            <View style={styles.listItemBox}>
              <Text style={[styles.labelText, {flex: 1}]}>{t('sys_cacheData')}</Text>
              <Text style={styles.cacheText}>{cacheSize}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
      <View style={styles.cardbox}>
        <View>
          <TouchableOpacity
            style={styles.loginOutBtn}
            onPress={() => viewAppInfo()}>
            <View style={styles.listItemBox}>
              <Text style={[styles.labelText, {flex: 1}]}>{t('sys_aboutApp')}</Text>
              <Image source={ArrowIcon} style={styles.icon} />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  loginOutBtn: {
    width: '100%',
    height: 50,
    borderColor: '#eee',
    borderBottomWidth: 1,
    borderStyle: 'solid',
  },
  oginOutBtn: {
    width: '100%',
    height: 50,
    marginTop: 20,
    borderRadius: 5,
  },
  labelText: {
    lineHeight: 50,
    textAlign: 'left',
  },
  cacheText: {},
  contentBoxTop: {
    marginTop: 20,
  },

  cardbox: {
    // backgroundColor: Colors.white,
    paddingLeft: 15,
    paddingRight: 15,
    marginTop: 15,
    borderRadius: 4,
  },
  listItemBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: 20,
    height: 20,
  },
});
export default connect()(Setting);
